<div class="init-width">
    <div class="wrapper login-bg">
        <div class="login-wraaper">
            <div class="content">
                <div class="logo">
                    <img src="images/logo.png"/>
                </div>
                <div class="title">
                    <h2 class="color-white">Have fun with ESP MESH</h2>
                </div>
                <div class="position-relative">
                    <i class="icon-person icon"></i>
                    <input id="username" :placeholder="$t('email')" v-model="username" type="text" class="form-control bg-bottom" >
                </div>
                <div class="position-relative">
                    <i class="icon-password icon"></i>
                    <input id="password" :placeholder="$t('password')" v-model="password" :type="type" class="form-control bg-bottom" >
                    <i @click="showPassword" class="i-eye color-white" :class="icon"></i>
                </div>
                <div class="position-relative guest">
                    <a @click="guestLogin">{{$t('guest')}}</a>
                </div>
                <div class="position-relative btn-wrapper">
                    <button type="submit" class="btn login-btn" @click="login">{{$t('login')}}</button>
                </div>
                <div class="user-operate">
                    <a @click="forgetPwd">{{$t('forgot')}}?</a>
                    <a @click="signup">{{$t('register')}}</a>
                </div>
            </div>
        </div>

    </div>
    <v-register ref="reg" v-on:regShow="onBackLogin"></v-register>
    <v-password :title="title" v-on:pwdShow="onBackLogin" ref="pwd"></v-password>
</div>



